<template>
  <div>
    <el-row>
      <div style="margin-bottom: 10px">
        <el-input v-model.trim="code" placeholder="输入楼盘名字进行搜索" style="width: 80%"></el-input>
        <el-button type="primary" style="width: 20%" @click="onSubmit" size="medium">查询</el-button>
      </div>
    </el-row>
    <div v-loading.fullscreen.lock="fullscreenLoading">
      <template v-if="list.length>0">
        <div ref="scroll0" class="scroll-list"
             style="white-space:nowrap;flex:1;overflow:hidden;display:flex;flex-flow:column;height: calc(100vh - 40px);"
        >
          <div class="scroll-content">
            <div class="card_test" v-for="item in list" :key="item.id" @click="showDetail(item)">
              <div style="display: flex;">
                <el-col class="text-df text-ellipsis" :span="18">
                  <span>{{ item.name }}</span>
                </el-col>
              </div>
              <!-- <div class="flex align-center margin-top-sm">地址：<span class="text-sm text-grey text-ellipsis" style="line-height: 1;">{{ item.address }}</span></div> -->
              <el-progress class="margin-top-xs" :percentage="filterData(item.installed_total_num/item.total_num)"
                           :format="progressFormat(item)"
              ></el-progress>
            </div>
            <div v-if="isEnd" class="text-gray text-center text-df">这里到底啦</div>
          </div>
        </div>
      </template>
      <div v-if="list.length==0" style="text-align: center">
        暂无数据
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderBuilding } from '@/api/app/worker'
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'

BScroll.use(Pullup)
export default {
  name: 'app_view_workorder_detail',
  data() {
    return {
      list: [],
      type: '0',
      code: null,
      orderId: null,
      typeId: null,
      isEnd: false,
      bscroll: null,
      listParams: {
        page: 1,
        page_size: 10
      },
      isPullUpLoad: false,
      fullscreenLoading: false,
      bsOptions: {
        scrollY: true,
        click: true,
        /* pullDownRefresh: {
          threshold: 90,
          stop: 10
        }, */
        pullUpLoad: true,
        bounce: {
          top: true,
          bottom: true
        }
      }
    }
  },
  methods: {
    beforeCreate() {
      document
        .querySelector('body')
        .setAttribute('style', 'background-color:#FFFFFF')
    },

    beforeDestroy() {
      document.querySelector('body').removeAttribute('style')
      this.bscroll && this.bscroll.destroy()
    },
    beforeRouteLeave(to, from, next) {
      this.$destroy()
      next()
    },
    activated() {
      document
        .querySelector('body')
        .setAttribute('style', 'background-color:#FFFFFF')
    },
    deactivated() {
      document.querySelector('body').removeAttribute('style')
      this.bscroll = null
    },
    showDetail(row) {
      let that = this
      that.$router.push({
        path: '/app/view/workorder_detail',
        query: {
          id: this.orderId,
          type: this.typeId,
          buildId: row.id,
          lat: row.lat,
          lng: row.lng
        }
      })
    },
    handleClick() {
      this.resetPage()
      this.getList(false)
    },
    resetPage() {
      const that = this
      that.list = []
      that.isEnd = false
      that.listParams.page = 1
      that.listParams.page_size = 10
      that.bscroll = null
    },
    onSubmit() {
      this.resetPage()
      this.getList(false)
    },
    getList(add = true) {
      const that = this
      if (!that.isEnd) {
        this.fullscreenLoading = true
        const params = Object.assign({
          orderId: this.orderId,
          orderType: this.typeId,
          code: this.code
        }, this.listParams)
        return getOrderBuilding(params).then(
          ({
            data: {
              current,
              pages,
              total,
              records,
              size
            }
          }) => {
            that.fullscreenLoading = false
            if (add) {
              that.list = (that.list || []).concat(records || [])
            } else {
              that.list = records || []
            }
            console.log(records.map(item => {
              return item.id
            }))
            that.listParams.page++
            let flag = (total / size) <= current
            if (flag) {
              that.isEnd = true
            }
            this.initBScroll()
          })
      }
    },
    initBScroll() {
      const that = this
      that.$nextTick(() => {
        const $scrollRef = that.$refs['scroll' + that.type]
        if (!$scrollRef) return false
        $scrollRef.hasVerticalScroll = true
        if (!that.bscroll) {
          that.bscroll = new BScroll($scrollRef, that.bsOptions)
          that.bscroll.on('pullingUp', () => {
            that.getList().then(() => {
              that.$nextTick(() => {
                that.bscroll.finishPullUp()
                that.bscroll.refresh()
                // this.isPullDownLoad = false;
                that.isPullUpLoad = false
              })
            })
          })
        } else {
          that.bscroll && that.bscroll.refresh()
        }
      })
    },
    filterData(val) {
      // 百分比必须为0-100，否则报错[Vue warn]:Invalid prop:custom validator check failed for prop "percentage"
      let result = 0
      if (val > 0 && (val <= 1)) {
        result = parseFloat((val * 100).toPrecision(12))
      }
      return result
    },
    progressFormat(item) {
      return () => {
        return '(' + item.installed_total_num + '/' + item.total_num + ')'
      }
    }
  },
  created() {
    let that = this
    const query = that.$route.query
    if (query.id) {
      this.orderId = query.id
    }
    if (query.type) {
      this.typeId = query.type
    }
    this.getList(false).then(
      () => {
        this.initBScroll()
      }
    )
  }
}
</script>

<style scoped type="text/css">
.card_test {
  box-shadow: 1px 1px 10px 1px #eee;
  margin: 10px 5px 10px 5px;
  min-width: 20px;
  min-height: 30px;
  padding: 10px;
}
</style>
<style scoped lang="scss">
.scroll-list {
  padding: 0 10px;

  .scroll-content {
    .card {
      display: flex;
      flex-flow: column;
      padding: 11px;
      background: rgba(255, 255, 255, 1);
      border-radius: 3px;
      min-height: 74px;
      box-sizing: border-box;
      margin: 15px 0;
      box-shadow: 1px 1px 10px 1px #eee;

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        div:nth-child(1) {
          width: 100%;
          white-space: normal;
          font-size: 16px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(36, 36, 36, 1);
          line-height: 22px;
        }

        div:nth-child(2) {
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(134, 134, 134, 1);
          line-height: 17px;
        }
      }

      .tip {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 18px;
        font-size: 13px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(88, 88, 88, 1);
        line-height: 18px;
        margin-top: 11px;
      }
    }
  }
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
